<template>
  <div class="results">
    <h1>训练结果</h1>
    <div class="results-container">
      <div class="metrics-panel">
        <h2>性能指标</h2>
        <div class="metrics-grid">
          <div class="metric-card">
            <h3>准确率</h3>
            <p>{{ metrics.accuracy }}%</p>
          </div>
          <div class="metric-card">
            <h3>损失值</h3>
            <p>{{ metrics.loss }}</p>
          </div>
          <div class="metric-card">
            <h3>训练时间</h3>
            <p>{{ metrics.trainingTime }}分钟</p>
          </div>
        </div>
      </div>
      <div class="chart-panel">
        <h2>训练过程</h2>
        <!-- 这里可以集成图表库展示训练过程 -->
        <div class="chart-placeholder">
          训练过程图表将在这里显示
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResultsView',
  data() {
    return {
      metrics: {
        accuracy: 95.5,
        loss: 0.045,
        trainingTime: 45
      }
    }
  }
}
</script>

<style scoped>
.results {
  padding: 20px;
}

.results-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.metric-card {
  padding: 15px;
  border-radius: 8px;
  background-color: #f5f5f5;
  text-align: center;
}

.chart-panel {
  padding: 20px;
  border-radius: 8px;
  background-color: #f5f5f5;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
  border-radius: 4px;
}
</style> 